<script setup>
import Histogram from '@/views/echarts/Histogram.vue';
import { getDjangoAPI } from '@/apis/djangoapi'
import { ref, onMounted } from 'vue';

// 1. 定义常量
const xAxisData = ['0-10k', '10-20k', '20-30k', '30-40k', '40k以上'];
const title = {
  text: '年龄分布图',
  subtext: '数据来自网络',
};

// 2. 请求接口，获取dataRef数据
const dataRef = ref({});
const getDjango = async () => {
  const res = await getDjangoAPI()
  // console.log(res)
  dataRef.value = res.data

}

// 3. 挂载时，执行接口请求
onMounted(() => {
  getDjango()
})
</script>

<template>
  <div class="chart-container">
    <!-- 4. 渲染图表组件，并传递数据 -->
    <Histogram :xAxisData="xAxisData" :title="title" :dataRef="dataRef" />
  </div>
</template>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
